<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取-元素尺寸于位置 </title>
     <style>
    .父级盒子 {
      position: relative; /* 定位:相对定位 */

      width: 200px; /* 宽高 背景色 */
      height: 200px;
      background-color: pink;

      margin: 100px; /* 外边距 */
    }

    .子级盒子 {
      width: 100px; /* 宽高 背景色 */
      height: 100px;
      background-color: purple;
      margin: 50px; /* 外边距 */
    }
  </style>
</head>
<body>
<h3>获取-元素尺寸于位置 </h3>
<p>
    使用场景： <br>
    前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。 <br>
    简单说，就是通过js的方式，得到元素在页面中的位置 <br>
    这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了
</p>

<p>
    获取宽高： <br>
    获取元素的自身宽高、包含元素自身设置的宽高、padding、border <br>
    offsetWidth和offsetHeight <br>
    获取出来的是数值,方便计算 <br>
    注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
</p>
<hr>

<p>
    获取位置： <br>
    获取元素距离自己定位父级元素的左、上距离 (受父级的影响)<br>
    offsetLeft和offsetTop 注意是只读属性
</p>
<pre style="font-size: 20px;">
1. offsetWidth和offsetHeight是得到元素什么的宽高？
    内容 + padding内边距 + border边框线 + 滚动条 (但不包括 margin外边距)
2. offsetTop和offsetLeft 得到位置以谁为准？
    带有定位的父级 (再次强调: 是带有 定位属性 的父级)
    如果都没有则以 文档左上角 为准
</pre>
<hr>

<!--演示区域-->
<div class="父级盒子">
    <p class="子级盒子"></p>
</div>


<script>
    // 获取DOM元素
   const div盒子 = document.querySelector('.父级盒子')
    console.log(`父级 div盒子,距离上面: ${div盒子.offsetTop}`) // div盒子 它的上面是页面, 所以值距离页面顶部的距离

    const p盒子 = document.querySelector('.子级盒子')
    // 检测盒子的位置  最近一级带有定位的祖先元素 (标签)
    console.log(`子级 p盒子,距离左面: ${p盒子.offsetLeft}`) // 控制台看信息, 这里是相当于 父级盒子的左面
</script>

</body>
</html>